<template>
  <div class="docsDetail">
    <div class="detail-top">
      <div class="detail-top-l">
        当前位置：
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/docs' }">{{ $route.meta.title }}</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="detail-top-r">
        <el-button type="primary" size="small"  plain @click="$router.go(-1)">返回列表</el-button>
      </div>
    </div>
    <div class="detail-content">
      <div class="c-item">
        <span class="item-label">文件名称:</span>
        <span class="item-value">{{docData.name}}</span>
      </div>
<!--      <div class="c-item">-->
<!--        <span class="item-label">文件类型:</span>-->
<!--        <span class="item-value">工作方案</span>-->
<!--      </div>-->
      <div class="c-item">
        <span class="item-label">发布时间:</span>
        <span class="item-value">{{docData.createTime}}</span>
      </div>
      <div class="c-item">
        <span class="item-label">发布单位:</span>
        <span class="item-value">{{docData.departName}}</span>
      </div>
      <div class="c-item">
        <span class="item-label">查看级别:</span>
        <span class="item-value">{{accessLevelName(docData.accessLevel)}}</span>
      </div>
      <div class="c-item">
        <span class="item-label">附件查看:</span>
        <span class="item-value" style="color: #8c8a8a">
          <i class="el-icon-paperclip"/>
          <span>{{docData.fileName}}</span>
          <span style="font-size: 14px;color: #9b9b9b;margin-left: 40px;cursor: pointer">
            下载次数{{docData.downCount}}
            <i class="el-icon-download" style="padding: 0 12px;font-size: 18px" @click="download"/>
            <i class="el-icon-view" style="font-size: 18px"/>
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {getInformationById, downloadById} from "@/api/information";
import {Loading} from "element-ui";

@Component
export default class DocsDetail extends Vue {
  @Prop({default: ''}) private title!: string;
  docData:any = {}
  async search(){
    const {id} = this.$route.query;
    let res = await getInformationById(id)
    this.docData = res.data
  }
  async download(){
    let loadingInstance = Loading.service({fullscreen: true, background: 'rgba(0, 0, 0, 0.7)'});
    let res = await downloadById(this.docData.id)
    loadingInstance.close()
    if (res && res.data) {
      (this as any).$download(res.data.fileName);
    }
  }
  get accessLevelName(){
    return (level) =>{
      switch(level){
        case 1:
          return "省级";
        case 2:
          return "市级";
        case 3:
          return "县级";
        case 4:
          return "乡镇";
        case 5:
          return "村";
      }
    }
  }
  mounted(){
    this.search()
  }
}
</script>
<style lang="scss" scoped>
.docsDetail{
  padding: 12px;
  background: #ffffff;
  .detail-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .detail-top-l{
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
    }
  }
  .detail-content{
    margin-top: 12px;
    background: #fafafa;
    padding: 20px 50px;
    .c-item{
      display: flex;
      align-items: center;
      gap:10px;
      margin-bottom: 20px;
      .item-label{
        color: #8c8a8a;
      }
      .item-value{
        color: #333333;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
